<!DOCTYPE html>
<html lang="zh-cn">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>热点</title>
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<!--[if lt IE 9]>
      <script src="js/html5shiv.min.js"></script>
      <script src="js/respond.min.js"></script>
    <![endif]-->
		<style type="text/css">
			/*.tan_bg{background: rgba(0,0,0,0.1);}*/
		</style>
		
	</head>

	<body>

		<!-- 头部导航 -->
		<header></header>
		<!--<nav class="navbar navbar-default" role="navigation">
			<div class="container">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navs">
	        <span class="sr-only">Toggle navigation</span>
	        <span class="icon-bar"></span>
	        <span class="icon-bar"></span>
	        <span class="icon-bar"></span>
	      </button>
					<a class="navbar-brand" href="index.html"><img src="Web/切图（第五周交付）/splash-ic.png" width="55" height="55" alt="logo" id="logo_img" /></a>
				</div>
				<div class="collapse navbar-collapse" id="navs">
					<ul class="nav navbar-nav navbar-right">
						<li class="active">
							<a href="index.html" target="_blank" class="nav_a"><span class="glyphicon li_active"><img src="Web/切图（第五周交付）/tabbar-news-f.png"/></span>热点</a>
						</li>
						<li>
							<a href="viewpoint.html" target="_blank" class="nav_a"><span class="glyphicon li_active"><img src="Web/切图（第五周交付）/tabbar-paper-n.png"/></span>观点</a>
						</li>
						<li>
							<a href="data.html?country=CN,US,JP&indicator=NY.GDP.MKTP.CD" target="_blank" class="nav_a"><span class="glyphicon li_active"><img src="Web/切图（第五周交付）/tabbar-numbers-n.png"/></span>数据</a>
						</li>
						<li class="dropdown">
							<a href="#" class="dropdown-toggle nav_a" data-toggle="dropdown"><span class="glyphicon"><img src="Web/切图（第五周交付）/n.png"/></span>我的 <span class="caret"></span></a>
							<ul class="dropdown-menu" role="menu">
								<li class="dropdown-header">登录</li>
								<li class="dl_style">
									<a href="javascript:void(0);" class="login_wechat">微信扫码</a>
								</li>
								<li class="dl_style">
									<a href="javascript:void(0);" class="login_phone">手机号</a>
								</li>
								<li>
									<a href="add_viewpoint.html" target="_blank">发布观点</a>
								</li>
								<li>
									<a href="my_viewpoint.html" target="_blank">历史观点</a>
								</li>
							</ul>
						</li>
					</ul>
				</div>
			</div>
		</nav>-->
		<!-- 头部导航结束  -->

		<div id="wx_phone">
			<!-- 手机号登陆  -->
			<div id="phone">
				<div class="modal-dialog modal_style">
					<div class="modal-content">
						<div class="modal-body">
							<p class="modal_style_title">手机登录</p>
							<form role="form">
								<div class="form-group fg">
									<a class="btn btn-info btn-sm btn-block none" id="phone_error">手机格式不正确！重新输入</a>
									<input type="text" class="form-control" id="input_Phone" placeholder="请输入手机号">
									<!--<input type="password" class="form-control" id="input_password" placeholder="请输入密码">-->
									
									<input type="text" class="form-control form-group-sm " id="input_Phone_code" placeholder="请输入验证码">
									<a class="btn btn-info btn-sm btn-block none" id="code_btn1"><span id="code_num"><i>60</i>秒后可重新</span>获取验证码</a>
									<input type="button" class="btn btn-primary btn-sm btn-block " id="code_btn"  data-placement="bottom" value="获取验证码" />
								</div>
								<!--<input type="button" class="btn modal_style_btn btn_next fg" value="下一步">-->
								<input type="button" class="btn btn-success btn-block modal_style_btn btn_login phone_code_login" value="登录">
								<p id="wechat_tag">
									<!--<a href="javascript:void(0)" data-toggle="modal" data-target="#PhoneCode" class="phone_code">手机验证码登录<span class="glyphicon glyphicon-play"></span></a>-->
									<a href="javascript:void(0)" data-toggle="modal" data-target="#Phone" class="phone_no fg_hide">手机号登录<span class="glyphicon glyphicon-play"></span></a>
									<a href="javascript:void(0)" data-toggle="modal" data-target="#WeChat" id="aaa" class="">微信登录<span class="glyphicon glyphicon-play"></span></a>
								</p>
							</form>
						</div>
					</div>
				</div>
			</div>
			<!-- 微信登陆  -->
			<div id="WeChat">
				<div class="modal-dialog modal_style">
					<div class="modal-content">
						<div class="modal-body">
							<p class="modal_style_title">扫码登录</p>
							<form role="form">
								<div class="form-group" id="wx">
									<img src="images/erweima.png" alt="微信扫码" />
								</div>
								<p id="wechat_tag">
									<a href="javascript:void(0)" data-target="#Phone" class="">手机登录<span class="glyphicon glyphicon-play"></span></a>
								</p>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 内容 -->
		<div class="container" id="hot_content">
			<!--<div class="row">--><!--</div>-->
		</div>
		<footer>
			<!--<div id="footer_" class="container">
				版权&copy;&nbsp;2017&nbsp;
				<p id="back_top">&and;</p>
			</div>-->
		</footer>
		<script src="js/jquery1.9.1.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<!--<script type="text/javascript" src="js/index.js"></script>-->
		<script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
		<script type="text/javascript">
			$("header").load("header.html");
			$("footer").load("footer.html");
			$(function() {
				$("#navs li").eq(0).addClass("active").siblings().removeClass("active");
				//接口
	    		var _href = "http://api.jjrb.grsx.cc",
	    			interfacelist = {
	    				select_indicator : "data/indicator/k/GDP",//查询indicator
	    				select_data: "/data",//查询数据      ?country=CN,US&indicator=NY.GDP.MKTP.CD&start=1990
	    				host_indicator: "/data/indicator/hot",//热门indicator
	    				select_country: "/data/country/k/",//查询国家/data/country/k/{val}
	    				news: "/feed/t/4"
	    			},n = 1,fl = true;
	    		ajaxPage(n);
	    		function ajaxPage(n){
	    			$.ajax({
		    			type:"get",
		    			'url': _href + interfacelist.news,//"热门.json",
		    			async:true,
		    			data:{'page': n},
		    			success: function(e){
		    				console.log(e);
		    				e.forEach(function(e,i){
	//	    					var a = e.id.substring(0,4)
		    					var htm = '<div class="col-sm-6 col-md-6 col-xs-12 sidebar">'+
										'<a href="hotspot_desc.html?id='+e.id+'"><img src="'+e.cover+'" /></a>'+
										'<div class="tan_bg">'+
										'	<span></span>'+
										'	<h1><a href="hotspot_desc.html?id='+e.id+'" title="'+ e.title +'">'+e.title+'</a></h1>'+
										'	<p>'+e.sub_title+'</p>'+
										'</div>'+
										'</div>';
								$("#hot_content").append(htm);
		    				})
							fl = true;
		    			}
		    		});
	    		}
//	    		$(document).on("mouseenter",".tan_bg",function(){
//	    			$(this).css("background","rgba(0,0,0,0.1)");
//	    		});
	    		$(document).on("scroll", function() {
					var bodyheight = $(document.body).height();
					var scorlltop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
					var viewheight = $(window).height();
		//			console.log(bodyheight + " ===" + scorlltop + "=========" + viewheight);
					if((scorlltop + viewheight) >= bodyheight) {
						
						if (fl) {
							n++;
							ajaxPage(n);
						}
						fl=false;
					}
				});
			});
		</script>
		<script type="text/javascript" src="js/index.js"></script>
	</body>

</html>